import styled from 'styled-components'
import img from '@img/all.png'
import vmpAddImg from '@img/vmp-add.png'
export const StyledWrap = styled.div`
	display: flex;
	flex-direction: column;
	padding: 20px;
	.left-panel {
		position: relative;
		width: 520px;
		.content {
			border: 1px dashed #bababa;
			height: 294px;
			position: relative;
			width: 496px;
			flex-wrap: wrap;
		}
		.item {
			user-select: none;
			line-height: 1.5;
			border-spacing: 0;
			border-collapse: collapse;
			text-align: left;
			color: #4e4e4e;
			font-size: 12px;
			box-sizing: content-box;
			padding: 0;
			border: 1px solid #c3c3c3;
			cursor: pointer;
			float: left;
			height: 130px;
			margin: 10px 0 0 10px;
			position: relative;
			width: 232px;
			span {
				&.delete {
					display: none;
					position: absolute;
					right: 0px;
					top: 0px;
					width: 23px;
					height: 23px;
					background-image: url(${img});
					background-position: -184px -226px;
					&:hover {
						background-position: -207px -226px;
					}
				}
				&.name {
					display: block;
					text-align: center;
					height: 100%;
					line-height: 132px;
				}
			}
		}
		.item:hover {
			.delete {
				display: inline-block !important;
			}
		}
		.bottom-setting {
			display: flex;
			align-items: center;
			height: 30px;
			.name-setting,
			.voice-setting {
				margin-right: 15px;
			}
			.tip {
				color: #ccc;
				text-align: right;
				flex: 1;
			}
		}
	}
	.right-panel {
		position: relative;
		height: 304px;
		width: 220px;
		padding-left: 40px;
		.right-btn {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 100%;
			display: flex;
			justify-content: flex-end;
		}
	}
	.setting-footer {
		width: 800px;
		position: relative;
		align-items: center;
		height: 30px;
		display: flex;
		flex-direction: row;
		.tip {
			flex-basis: 500px;
			color: #ccc;
			text-align: right;
			flex: 1;
			.icon {
				display: inline-block;
				height: 21px;
				width: 21px;
				background-image: url(${img});
				background-position: 0px -558px;
				margin-right: 10px;
				vertical-align: top;
			}
		}
		.right-btn {
			display: flex;
			flex-basis: 260px;
			padding-left: 100px;
			justify-content: flex-start;
			margin-right: 25px;
			margin-top: 20px;
		}
	}
`
/**拖拽按钮*/
export const AddIcon = styled.div`
	width: 17px;
	height: 17px;
	display: inline-block;
	position: absolute;
	left: calc(50% - 7.5px);
	top: calc(50% - 7.5px);
	background: url(${vmpAddImg}) no-repeat;
`
